<template>
  <section class="container">
 
    <!-- 地图 -->
    <el-row type="flex" justify="space-between" class="mapWrapper">
      <el-col :span="15">
        <div id="container" style="width: 650px; height: 360px"></div>
      </el-col>
      <el-col :span="8">
        <div class="asizeHead">
          <div
            class="navLine"
            :style="`transform: translate(${currentNum * 68}px)`"
          ></div>
          <span
            class="nav"
            v-for="(nav, index) in ['风景', '交通']"
            :key="index"
            @click="handleClick(index)"
            :class="{
              active: currentNum == index,
            }"
          >
            {{ nav }}</span
          >
        </div>
        <div class="asizeBody" v-if="currentNum == 0">
          <!-- <el-row type="flex">
            <el-col></el-col>
            <el-col :span="8"></el-col>
          </el-row> -->

          <div
            class="rowData"
            v-for="(pois, index) in poisList"
            :key="pois.id"
            :id="'pois' + index"
          >
            <div>{{ pois.name }}</div>
            <div>{{ pois.newDistance }}</div>
          </div>
        </div>
        <div class="asizeBody" v-if="currentNum == 1">
          <div
            class="rowData"
            v-for="(pois, index) in poisList"
            :key="pois.id"
            :id="'pois' + index"
          >
            <div>{{ pois.name }}</div>
            <div>{{ pois.newDistance }}</div>
          </div>
          <!--  <el-row
            type="flex"
            class="rowData"
            v-for="(pois, index) in poisList"
            :key="pois.id"
            :id="'pois' + index"
          >
            <el-col>{{ pois.name }}</el-col>
            <el-col :span="8">{{ pois.newDistance }}</el-col>
          </el-row> -->
        </div>
      </el-col>
    </el-row>
   
  </section>
</template>

<script>
export default {
  data() {
    return {
      hotelInfo: {},
      value: 3.7,
      currentNum: 0,
      tableData: [],
      poisList: [],
      // 中心点
      center: "",
    };
  },
  watch: {
    currentNum() {
      this.loadMap();
    },
  },
  mounted() {
    // 发送请求获取酒店数据且加载高德地图
    this.loadMap();
  },

  methods: {
    // 封装函数进行高德地图显示
    loadMap() {
      this.loadData().then((data) => {
        //中心点坐标
        this.center = [data.location.longitude, data.location.latitude];

        // 发送请求获取周围数据
        this.$axios({
          url: "https://restapi.amap.com/v3/place/text",
          params: {
            keywords: "",
            city: data.city.name.replace(/市$/, ""),
            location: data.location.longitude + "," + data.location.latitude,
            types: this.currentNum == 0 ? "风景名胜" : "交通设施服务",
            output: "json",
            page: 1,
            offset: 10,
            key: "37bf7f90d1c870a433d2c426467bc5fe",
          },
        }).then((res) => {
          // console.log(res, "res");

          // 使用箭头函数改变this指向
          window.onLoad = () => {
            var map = new AMap.Map("container", {
              zoom: 16,
              center: this.center,
              viewMode: "3D",
              resizeEnable: true,
            });

            AMap.plugin(
              "[AMap.Marker,AMap.GeometryUtil,AMap.InfoWindow]",
              () => {
                // 获取周围10个风景 使用箭头函数改变this指向
                // 1.1 获取所有地点的坐标
                var markerCenter = new AMap.Marker({
                  map: map, //显示的地图
                  position: this.center,
                  content: `
                  <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-blue.png">
                  <span class="close-btn iconfont icon-hotel "></span>
               `,
                    // icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(index+1)+'.png',
                });
                // 添加酒店的点标记
                var marker = "";

                res.data.pois.forEach((poisItem, index) => {
                  // console.log(poisItem, "poisItem");

                  marker = new AMap.Marker({
                    // 使用title就可以实现提示
                    title: poisItem.name,
                    // 配置地标
                    map: map, //显示的地图
                    position: [
                      poisItem.location.split(",")[0],
                      poisItem.location.split(",")[1],
                    ],
                  //   content: `
                  // <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">
                  // <span class="close-btn btn${index}" ">${index + 1}</span>`,
                    icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(index+1)+'.png',
                  });

                  //地图自适应多个标记点 可以根据所有的点标记进行适应显示
                  map.setFitView();

                  //根据id绑定外面的dom的鼠标移入事件
                  // console.log(index, "pois0");

                  // 清空其它的鼠标移入事件

                  //单独绑定中心点的 鼠标移入到标记改变地图显示的中心点
                  AMap.event.addListener(markerCenter, "mouseover", function (
                    e
                  ) {
                    // marker是鼠标移入的对应的点标记 e可以获取到marker标记的事件对象

                    // 获取标记的坐标 不要使用当前鼠标移入的点的位置的坐标 否则会出现提示位置偏差
                    var center = [
                      e.target.w.position.lng,
                      e.target.w.position.lat,
                    ];
                    // 改变地图中心点;
                    map.setCenter(center);

                    // 鼠标移入到标记显示提示功能
                    //自定义的提示结构
                    var info = [];
                    info.push(
                      `<div style="font-size: 12px;color: #333">${data.name}</div>`
                    );
                    //创建信息窗口的实例
                    var InfoWindow = new AMap.InfoWindow({
                      //加入自定义的提示结构
                      content: info.join(""),
                      //设置提示显示位置的偏移量 向右2向上30
                      offset: new AMap.Pixel(2, -30),
                    });

                    //设置打开信息窗体
                    InfoWindow.open(map, marker.getPosition());
                    //设置信息窗体显示的位置
                    InfoWindow.setPosition(center);
                  });
                  //鼠标移入到标记改变地图显示的中心点
                  AMap.event.addListener(marker, "mouseover", function (e) {
                    // console.log(e, "e");
                    // marker是鼠标移入的对应的点标记 e可以获取到marker标记的事件对象

                    // 获取标记的坐标 不要使用当前鼠标移入的点的位置的坐标 否则会出现提示位置偏差
                    var center = [
                      e.target.w.position.lng,
                      e.target.w.position.lat,
                    ];
                    // 改变地图中心点;
                    map.setCenter(center);

                    // 鼠标移入到标记显示提示功能
                    //自定义的提示结构
                    var info = [];
                    info.push(
                      `<div style="font-size: 12px;color: #333">${e.target.w.title}</div>`
                    );
                    //创建信息窗口的实例
                    var InfoWindow = new AMap.InfoWindow({
                      //加入自定义的提示结构
                      content: info.join(""),
                      //设置提示显示位置的偏移量 向右2向上30
                      offset: new AMap.Pixel(2, -30),
                    });

                    //设置打开信息窗体
                    InfoWindow.open(map, marker.getPosition());
                    //设置信息窗体显示的位置
                    InfoWindow.setPosition(center);
                  });
                });
                // 设置延时器处理模板未渲染div.rowData而获取不到div.rowData元素
                setTimeout(() => {
                  // 获取目标元素
                  let elementDom = document.querySelectorAll(
                    ".asizeBody .rowData"
                  );

                  // 遍历目标元素
                  elementDom.forEach((item, index) => {
                    // console.log(item, "item");
                    AMap.event.addDomListener(item, "mouseover", function (e) {
                      // 使用事件对象获取到 对应的文本来匹配地址

                      if (e.toElement.innerText == res.data.pois[index].name) {
                        var myCenter = [
                          res.data.pois[index].location.split(",")[0],
                          res.data.pois[index].location.split(",")[1],
                        ];
                        // 获取坐标改变地图的中心点
                        map.setCenter(myCenter);
                        //自定义的提示结构
                        var info = [];
                        info.push(
                          `<div style="font-size: 12px;color: #333">${e.toElement.innerText}</div>`
                        );
                        //创建信息窗口的实例
                        var InfoWindow = new AMap.InfoWindow({
                          //加入自定义的提示结构
                          content: info.join(""),
                          //设置提示显示位置的偏移量 向右2向上30
                          offset: new AMap.Pixel(2, -30),
                        });

                        InfoWindow.open(map, myCenter);
                        InfoWindow.setPosition(myCenter);
                      }
                    });
                  });
                }, 100);

                // console.log(newitem, "newitem");
                // console.log(newitem.length);
                res.data.pois = res.data.pois.map((item) => {
                  //1. 计算每个点的距离
                  // 中心点的坐标
                  var p1 = [data.location.longitude, data.location.latitude];
                  //其它点标记点的坐标
                  var p2 = [
                    item.location.split(",")[0],
                    item.location.split(",")[1],
                  ];
                  //计算两点间的距离 转化未公里单位的值
                  var mapLength = (
                    AMap.GeometryUtil.distance(p1, p2) / 1000
                  ).toFixed(2);
                  // console.log(mapLength, "mapLength");
                  return {
                    ...item,
                    newDistance: mapLength + "公里",
                  };
                });

                // 绑定数据 用于遍历渲染数据
                this.poisList = res.data.pois;
                // console.log(this.poisList, 2);
              }
            );
          };

          var url =
            "https://webapi.amap.com/maps?v=1.4.15&key=2f8f1ab47f5f80d384d6543fe6658a6a&callback=onLoad";
          var jsapi = document.createElement("script");
          jsapi.charset = "utf-8";
          jsapi.src = url;
          document.head.appendChild(jsapi);
        });
      });
    },

    // 发送请求获取酒店详情数据 封装函数
    // 使用promise异步处理请求回来的坐标
    loadData() {
      return this.$axios({
        url: "/hotels",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res, "酒店详情");
        let data = res.data.data[0];
        console.log(data);
        //1.改造获取的数据 根据星级长度 构造一个数组 用来遍历星级显示
        //  1.1 根据星级长度 构造一个数组 使用Array(数组的长度).fill(填充的数组元素) 创建指定长度的且含有参数数组
        // let arrLevel = new Array(data.hotellevel.level).fill(1);
        // //  1.2 改造获取的数据 加入新属性
        // data.hotellevel.arrLevel = arrLevel;
        // 获取酒店信息
        this.hotelInfo = data;
        // 获取不同网站的价格信息
        this.tableData = data.products;
        // 推荐的评论星级
        this.value = data.stars;
        //获取坐标位置
        return data;
      });
    },
    handleClick(index) {
      this.currentNum = index;
    },
    changeImg(src) {
      this.srcImg = src;
      // console.log(this.srcImg);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  .navigation {
    margin: 14px 0;
    font-size: 14px;
    div {
      font-weight: 700;
      .el-icon-arrow-right {
        font-weight: normal;
        color: #888;
      }
    }
    .notFontWeight {
      font-weight: normal;
      color: #888;
    }
  }
  .address {
    margin-bottom: 20px;
    .iconhuangguan {
      color: #ff9900;
    }
    .hotel {
      font-size: 24px;
      margin-right: 10px;
    }
    .location {
      padding-top: 4px;
      font-size: 14px;
      color: #888;
      .el-icon-location {
        font-size: 16px;
        color: #666666;
      }
    }
  }
  .banner {
    margin: 40px 0;
    height: 360px;
    object-fit: cover;
    .img {
      display: flex;
      justify-content: space-between;
      align-content: space-between;
      flex-wrap: wrap;
      //   padding: 10px 5px;
      img {
        display: block;
        width: 160px;
      }
    }
  }
  .price {
    .bestPrice {
      color: #ff9900;
      font-size: 16px;
      .normalColor {
        color: #333;
        font-size: 14px;
      }
    }
  }
  .mapWrapper {
    margin-top: 40px;
    margin-bottom: 20px;
    /deep/ .amap-marker {
      // border: 1px solid #000;
      .amap-marker-content {
        width: 22px;
        height: 36px;
        // border: 1px solid #000;
        // text-align: center;
        display: flex;

        img {
          display: block;
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        }
        span {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          display: block;
          text-align: center;
        }
      }
    }
    .asizeHead {
      position: relative;
      display: flex;
      height: 40px;
      border-bottom: 2px solid #e4e4e4;

      .active {
        color: #409eff;
      }
      .navLine {
        position: absolute;
        bottom: -2px;
        height: 1px;
        width: 28px;
        background-color: #409eff;
        transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      }
      .nav {
        font-size: 14px;
        cursor: pointer;
        display: block;
        width: 28px;
        margin-right: 40px;
        padding: 10px 0;
        padding-bottom: 11px;
      
      }
    }
    .asizeBody {
      height: 300px;
      margin-top: 16px;
      //   border: 1px solid #000;
      color: #666;
      padding-left: 10px;
      padding-right: 16px;
      font-size: 14px;
      overflow-y: scroll;
      .rowData {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        cursor: pointer;
        &:hover{
          color: #ff9900;
        }
      
        > div:first-child {
          flex: 1;
        }
        > div:last-child {
          padding-right: 10px;
        }
      }
    }
  }
  .hotelInfo {
    margin-bottom: 40px;
    .common {
      font-size: 14px;
      padding: 20px 0;
      padding-left: 10px;
      border-bottom: 1px solid #e4e4e4;
    }
    .baseInfo {
      color: #888;
    }
    .mianFacility {
      .FacilityList {
        span {
          background-color: #e4e4e4;
          color: #888;
          height: 24px;
          line-height: 24px;
          border-radius: 4px;
          padding: 0 10px;
          margin-right: 10px;
        }
      }
    }
  }
  .commentWrapper {
    position: relative;
    margin-bottom: 20px;
    padding-right: 20px;
    .el-rate {
      position: absolute;
      top: 22px;
      z-index: 2;
    }
    /deep/ .el-icon-star-on {
      font-size: 22px;
    }
    /deep/ .el-rate__icon {
      margin-right: 0px;
    }
    /deep/.el-rate__text {
      padding-left: 4px;
    }
    .recommend {
      position: absolute;
      top: -2px;
      left: 182px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      border-radius: 50%;
      border: 2px solid #ffe6c1;
      color: #ffe6c1;
      font-size: 24px;
      transform: rotateZ(-30deg);
      opacity: 0.8;
      z-index: 1;
    }
    h1 {
      font-size: 16px;
      margin: 20px 0;
    }
    .commentData {
      color: #888;
    }
    .yellow {
      color: #ffb444;
    }
  }
}
</style>